<template>
  <div>

    <video-player
      class="video-player vjs-big-play-centered"
      :src="url"
      crossorigin="anonymous"
      playsinline
      controls
      :wid="300"
      :height="300"
      :volume="0.6"
      :playback-rates="[0.7, 1.0, 1.5, 2.0]"
      @mounted="handleMounted"
      @ready="handleEvent($event)"
      @play="handleEvent($event)"
      @pause="handleEvent($event)"
      @ended="handleEvent($event)"
      @loadeddata="handleEvent($event)"
      @waiting="handleEvent($event)"
      @playing="handleEvent($event)"
      @canplay="handleEvent($event)"
      @canplaythrough="handleEvent($event)"
      @timeupdate="handleEvent(player?.currentTime())"
    ></video-player>
  </div>
</template>
<script setup lang="ts">
import { shallowRef } from "vue";
import { $ref } from "vue/macros";

let url = $ref("http://rni4rzhn1.hb-bkt.clouddn.com/WeChat_20221226222926.mp4");
const player = shallowRef();

const handleMounted = (payload: any) => {
  player.value = payload.player;
  console.log("Basic player mounted", payload);
};

const handleEvent = (log: any) => {
  console.log("Basic player event", log);
};
</script>
<style scoped lang="less">
/deep/.vjs-big-play-button{
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
}
/deep/.vjs-icon-placeholder:before{
  position: absolute!important;
  left: -0.5em !important;
  top: -0.75em !important;
}
</style>
